<template>
  <div class="cart">
    <div class="head">
      <van-nav-bar
        title="购物车"
      />
      <img class="tu" src="http://www.sunlulu.club/img/cart.png" alt="">
    </div>

    <div class="mid">
      <ul>
        <li v-for="(item,index) in lists" :key="index" :ref="'sx-'+item.id">
          <div class="lil">
            <input type="checkbox" :ref="'check-'+item.id" v-model="item.checked" @click="tol()">
            <van-panel :title="item.product.name" :desc="item.product.descriptions"></van-panel>
          </div>
          <div class="lir">
            <span>￥<span>{{item.product.price*item.quantity}}</span></span>
            <van-stepper :minus="shan(item.quantity,item._id)" v-model="item.quantity" min="0"/>
          </div>
        </li>
      </ul>
    </div>

    <div class="foot">
      <div class="ft">
        <div class="ft1">
          <span class="s1">猜你喜欢</span>
          <span @click="huan" class="s2">换一批</span>
        </div>
        <div class="ft2">
          <ul>
            <li v-for="item in list" :key="item.id" @click="xiangqing(item._id)">
              <img :src='item.coverImg' alt="">
              <p class="p1">{{item.name}}</p>
              <p class="p2">{{item.descriptions}}</p>
              <div class="jia">
                <p>￥<span>{{item.price*item.quantity}}</span></p>
                <van-icon name="add-o" size="20px" color="rgba(136, 175, 213, 1)"/>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="b">
        <div class="left">
          <span class="l1">应付合计</span>
          <span class="l2">￥{{getSum}}</span>
        </div>
        <div class="right">
          <span class="r3" @click="jiesuan()">去结算</span>
        </div>
    </div>
    </div>
  </div>
</template>

<script>
import { cartProducts } from "../api/product"
import { getProducts } from '../api/cart'
import { delProducts } from '../api/cart'
import { getorders } from '../api/order'

export default {
  data() {
    return {
      page:1,
      list:[],
      value:0,
      lists: [],
      num: '',
      id:'',
      info:[]
    }
  },
  methods: {
    //点击换一换切换产品
    huan() {
      this.page++;
      this.Res();
    },
    //调用接口返回数据
    async Res() {
      const res = await cartProducts(this.page);
      this.list = res.data.products;
    },
    xiangqing(id) {
      this.$router.push({name:'Detail',query:{id}});
    },
    //判断步进器数量为0时删除商品
    shan(num,id) {
      if(num === 0) {
        delProducts(id).then(()=>{
            this.$router.go(0);
        });

      }
    },
    tol() {
      // console.log(this.$refs.price);
    },
    //点击结算按钮，进入订单页面将接口信传入订单接口
    jiesuan(id) {
      for(let i= 0;i<this.lists.length;i++) {
        if(this.$refs['check-' +id][i].checked) {
          console.log(this.$refs['check-' +id][i].checked);
          var checkedList = this.lists.filter(item=>item.checked)
          localStorage.setItem('selectedCart', JSON.stringify(checkedList))
          this.$router.push({name:'Order'});

        }
      }
    }
  },
  //将page:1,per:3传入调取猜一猜数据接口
  async created() {
    this.id = this.$route.query.id;
    const res = await cartProducts(1,3);
  },
  //计算总价
  computed: {
    getSum() {
        return this.lists.filter(item => item.checked).reduce(function (v, item) {
            return v + (item.product.price* item.quantity)
        }, 0)
      }
  },
  //猜一猜与购物车商品列表数据的调取
  async created() {
    const res = await cartProducts(1,3);
    this.list = res.data.products;
    const gods = await getProducts();
    console.log(gods)
    this.lists = gods.data;
    console.log(this.lists)

  },
}
</script>

<style scoped>
.cart{
  display: flex;
  flex-direction: column;
}
.van-nav-bar__title{
  font-size: 18px;
  font-weight: bolder;
}
.mid{
  flex: 1;
  overflow: auto;
}
.mid ul {
  height: 65px;
  padding: 14px 15px;
}
.mid ul li {
  height: 65px;
  border-bottom:solid 1px gainsboro;
  display: flex;
  justify-content: space-between;
  line-height: 65px;
}
.mid ul li:nth-child(1){
  border-top:solid 1px gainsboro;
}
.lil {
  display: flex;
  width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  align-items: center;
}
.van-cell{
  padding: 10px 5px;
}
.lil .fuxuan {
  line-height: 65px;
  display: block;
}
.lir {
  width: 185px;
  display: flex;
  justify-content: space-between;
}
.lir span {
  font-size: 16px;
  color: brown;
}

.foot {
height: 240px;
}
.tu {
  width: 100%;
}
.head {
height: 114px;
}
.ft {
  height: 180px;
  background: ghostwhite;
}
.b {
  height: 60px;
  display: flex;
}
.b .left {
  width: 70%;
}
.b .left .l1 {
  margin-left: 10px;
  line-height: 60px;
}
.b .left .l2 {
  font-weight: 600;
  font-size: 23px;
  margin-left: 8px;
}
.b .right {
  width: 30%;
  background:skyblue;
}
.b .right .r3 {
  line-height: 60px;
  margin-left: 30px;
  color: white;
}
.ft {
padding: 0 12px;
}
.ft1{
  height: 24px;

  display: flex;
  justify-content: space-between;
}
.f1 {
  display: flex;
}
.ft1 .s1 {
  font-size: 16px;
  font-weight: bold;
  line-height: 24px;
}
.ft1 .s2 {
  font-size: 14px;
  line-height: 24px;
  color:skyblue;
}
.ft2 {
  height: 156px;
  width: 351px;
}
.ft2 ul {
display: flex;
}
.ft2 ul li {
  width: 110px;
  height: 156px;
}
.ft2 ul li:nth-child(2) {
 margin:0 11px;
}
.ft2 ul li:nth-child(3) {
 margin-right: 11px;
}
.ft2 img {
  display: block;
  width: 110px;
  height: 80px;
}
.ft2 li p {
  margin: 0px;
  font-size: 14px;
}
.ft2 li .jia {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}
.ft2 li .jia p {
  text-indent: 3px;
}
.ft2 li .p1,.ft2 li .p2 {
text-indent: 5px;
font-size: 14px;
width: 110px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ft2 li .p2 {
color: grey;
}
</style>
